<template>
  <div>
    <div class="opration-wrap">
      <el-input
        v-model="form.qaTitle"
        class="quality-search"
        :prefix-icon="Search"
        @keyup.enter="handleQuery"
        clearable
        placeholder="支持编号及主题查询"></el-input>
      <el-button type="primary" @click="addBtn">新增问题</el-button>
    </div>
    <div class="select-wrap">
      <el-form ref="formRef" inline :model="form" label-width="60px">
        <el-form-item label="类型:" prop="qaType">
          <el-select v-model="form.qaType" class="select-class" placeholder="请选择" clearable>
            <el-option
              v-for="(item, index) in dict.dictMap['task_question_type']"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态:" prop="qaStatus">
          <el-select v-model="form.qaStatus" class="select-class" placeholder="请选择" clearable>
            <el-option
              v-for="(item, index) in dict.dictMap['task_question_status']"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="指派给:" prop="userId">
          <el-select v-model="form.userId" class="select-class" placeholder="请选择" clearable filterable>
            <el-option
              v-for="item in projectMemberList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="优先级:" prop="qaPriority">
          <el-select v-model="form.qaPriority" class="select-class" placeholder="请选择" clearable>
            <el-option
              v-for="(item, index) in dict.dictMap['task_priority']"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="程度:" prop="qaLevel">
          <el-select v-model="form.qaLevel" class="select-class" placeholder="请选择" clearable>
            <el-option
              v-for="(item, index) in dict.dictMap['task_question_leave']"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictValue" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%" border>
        <template v-for="(item, index) in column" :key="index">
          <el-table-column :prop="item.prop" :label="item.label" align="center" :width="item.width">
            <template v-if="item.prop === 'qaCode'" #default="scope">
              <span class="qa-code-class">#{{ scope.row[item.prop] }}</span>
            </template>
            <template v-else-if="item.prop === 'qaType'" #default="scope">
              <div class="quality-tag" :style="priorityColor(scope.row.qaType)">
                {{ dict.translate('task_question_type', scope.row.qaType) }}
              </div>
            </template>
            <template v-else-if="item.prop === 'qaPriority'" #default="scope">
              <div class="quality-tag" :style="priorityColor(scope.row.qaPriority)">
                {{ dict.translate('task_priority', scope.row.qaPriority) }}
              </div>
            </template>
            <template v-else-if="item.prop === 'qaStatus'" #default="scope">
              <span>
                {{ dict.translate('task_question_status', scope.row.qaStatus) }}
              </span>
            </template>
            <template v-else-if="item.prop === 'qaTitle'" #default="scope">
              <div class="qa-title-class" @click="handleOpen(scope.row.qaId)">{{ scope.row[item.prop] }}</div>
            </template>
            <template v-else-if="item.prop === 'tcQaMembers'" #default="scope">
              <span>
                {{ scope.row.tcQaMembers?.map((obj) => obj.taskUserName).join(',') }}
              </span>
            </template>
            <template v-else-if="item.prop === 'qaLevel'" #default="scope">
              <span>
                {{ dict.translate('task_question_leave', scope.row.qaLevel) }}
              </span>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="page.pageNum"
          v-model:page-size="page.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- 新增/编辑 弹框 -->
    <TaskChatDialog
      v-model="addVisible"
      :title="ifAdd ? '新增问题' : '编辑问题'"
      bodyClassName="add-qulity-dialog"
      width="80%"
      destroy-on-close
      append-to-body
      :fullscreen="isFullScreen"
      @close="handleAddClose">
      <AddQualityQuestion
        ref="addQualityDiaRef"
        :ifAdd="ifAdd"
        :addHandleStatus="addHandleStatus"
        :projectId="projectId"
        :projectMemberList="projectMemberList"
        :editData="editData"
        @changeLoading="(val) => (submitLoading = val)"
        @refresh="refresh"
        @changeFullScreen="
          (val) => {
            isFullScreen = val
          }
        " />
      <template #footer>
        <el-button @click="handleAddClose">取消</el-button>
        <el-button type="primary" @click="submitFunc" :loading="submitLoading">确定</el-button>
      </template>
    </TaskChatDialog>
    <TaskChatDialog
      v-model="detailVisible"
      width="1200px"
      class="quality-dialog"
      :title="detailDiolagTitle"
      body-class-name="dialog-quality"
      append-to-body
      @close="handleDetailClose"
      destroy-on-close>
      <QualityDetail
        :projectId="projectId"
        :projectMemberList="projectMemberList"
        :quality="editData"
        @refresh="refresh"></QualityDetail>
    </TaskChatDialog>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useDictionary } from '@/use/use-dictionary'
import { getProjectMember } from '@/assets/api/project'
import { getQaInfoTableData, getTcQaInfo } from '@/assets/api/quality'
import { priorityColor } from '@/utils/task-utils'

const props = defineProps({
  projectId: String,
})

const dict = useDictionary(['task_question_type', 'task_question_status', 'task_priority', 'task_question_leave'])
const form = ref({})
watch(
  () => form.value,
  (n, o) => {
    getTableData()
  },
  { deep: true }
)
// const searchValue = ref('')
const addVisible = ref(false)
const ifAdd = ref(true)
const addHandleStatus = ref(0)
const tableData = ref([])
const column = ref([
  { prop: 'qaCode', label: '编号', width: 70 },
  { prop: 'qaType', label: '问题', width: 125 },
  { prop: 'qaPriority', label: '优先级', width: 125 },
  { prop: 'qaStatus', label: '状态', width: 70 },
  { prop: 'qaTitle', label: '主题' },
  { prop: 'tcQaMembers', label: '指派给', width: 200 },
  { prop: 'updatedTime', label: '更新于', width: 100 },
  { prop: 'qaLevel', label: '严重程度', width: 100 },
])
const page = ref({
  pageSize: 10,
  pageNum: 1,
})
const dataTotal = ref(0)
const isFullScreen = ref(false)
const addBtn = () => {
  addVisible.value = true
  ifAdd.value = true
  addHandleStatus.value = 1
}
const handleQuery = () => {
  // page.value.pageNum = 1
  // getTableData()
}
async function getTableData() {
  const queryInfo = reactive({
    data: {
      projectId: props.projectId,
      ...form.value,
    },
    params: {
      ...page.value,
    },
  })
  //查询列表
  const { rows, total } = await getQaInfoTableData(queryInfo)
  tableData.value = rows || []
  dataTotal.value = total
}
function refresh(value) {
  if (value) {
    editClick(value)
    handleCurrentChange(page.value.pageNum)
  } else {
    handleCurrentChange(1)
    addVisible.value = false
  }
  submitLoading.value = false
}
function handleSizeChange(val) {
  page.value.pageSize = val
  getTableData()
}
function handleCurrentChange(val) {
  page.value.pageNum = val
  getTableData()
}

const detailVisible = ref(false)
const detailDiolagTitle = ref('')
// 打开详情弹窗
function handleOpen(qaId) {
  editClick(qaId, 'open')
}
const editData = ref({})

function editClick(qaId, str = 'search') {
  getTcQaInfo(qaId).then((res) => {
    //获取任务质量单详细信息-根据qaId查询编辑详情
    if (res.code === 200) {
      editData.value = res.data
      if (str === 'open') {
        //打开详情弹框
        detailVisible.value = true
        if (editData.value.qaTitle) {
          const { projectName, qaTitle, qaCode } = editData.value
          detailDiolagTitle.value = `${projectName}/${qaTitle}-#${qaCode}`
        }
      } else if (str === 'edit') {
        //编辑
        addVisible.value = true
        ifAdd.value = false
      } else {
        //
      }
    } else {
      ElMessage.error(res.msg)
    }
  })
}
function handleDetailClose() {
  // editData.value = {}
}

const addQualityDiaRef = ref()
function handleAddClose() {
  isFullScreen.value = false
  addVisible.value = false
}
const submitLoading = ref(false)
function submitFunc() {
  // submitLoading.value = true
  addQualityDiaRef.value.submitFunc()
  // addVisible.value = false
}

const projectMemberList = ref([])
function getProjectMemberData() {
  //查询项目成员
  getProjectMember({ projectId: props.projectId, effectFlag: 1 }).then((res) => {
    if (res.code === 200) {
      projectMemberList.value = res.rows
    } else {
      ElMessage.error(res.msg)
    }
  })
}

onMounted(() => {
  getTableData()
  getProjectMemberData()
})
</script>
<style lang="scss" scoped>
.opration-wrap {
  @include use-flex(center, space-between);
  margin-bottom: 18px;
  .quality-search {
    width: 50%;
  }
}
.select-wrap {
  margin-bottom: 20px;
  .select-class {
    width: 120px;
  }
}
.pagination {
  margin-top: 20px;
}
.elp-pagination {
  justify-content: center;
}
.qa-code-class {
  color: #ffa112;
}
.quality-tag {
  font-size: 12px;
  display: inline-block;
  padding: 2px 15px;
  border-radius: 50px;
  background-color: var(--elp-color-info-light-7);
  & + .quality-tag {
    margin-left: 5px;
  }
}
.qa-title-class {
  cursor: pointer;
  color: #18bae7;
}

:deep(.fiz-eim-dialog) {
  .dialog-quality {
    background-color: var(--elp-bg-color-page);
  }
}
</style>
